<template>
  <view class="exchangeTea">
    <classifyHead title="换茶票" />
    <view class="middle">
      <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da32a9e4b0eb7e9b0fec5e.png" mode="aspectFill" />
      <view class="middle-item">
        <view class="left">
          <image src="../../static/MorenTx.png" mode="aspectFill" />
          <view style="margin-top: 10rpx">用户名125487</view>
          <view>ID:875896</view>
        </view>
        <view class="right">
          <view class="scoreName">
            <view class="right-scoreName">
              <view>订购积分</view>
              <view style="margin-top: 20rpx">58745424.00</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="count" style="margin-bottom: 20rpx">
        <view>可用竞购积分: </view>
        <view>58745424.00</view>
      </view>
      <view class="transfer-info">
        <view>换取茶数量</view>
        <input
          type="text"
          placeholder="(1张查票=100竞购积分)"
          v-model="params.teaCount"
        />
      </view>
      <view class="transfer-info">
        <view>竞购积分 </view>
        <input
          type="text"
          placeholder="请榆入您要兑换的数量"
          v-model="params.count"
        />
      </view>
      <view class="transfer-info" style="height: 200rpx">
        <view class="left">
          <view>手垵费 </view>
          <view style="margin: 10rpx 0">实际获得茶票属</view>
          <view>实际支付</view>
        </view>
        <view class="right">
          <view>240.00积分</view>
          <view style="margin: 10rpx 0">40张</view>
          <view class="sum">4240.00积分</view>
        </view>
      </view>

      <view class="other">
        <view>说明:</view>
        <view>1.手续费6%</view>
        <view>2.换取茶票数为整数，即积分输入为整百</view>
      </view>

      <button class="btn">确认提交</button>
    </view>
  </view>
</template>

<script setup>
import classifyHead from "@/components/classifyHead.vue";
import { ref } from "vue";
//输入框的数据
const params = ref({
  teaCount: "",
  count: "",

});
</script>

<style lang="scss" scoped>
.exchangeTea {
  .middle {
    width: calc(100% - 40rpx);
    margin: 20rpx;
    height: 250rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .middle-item {
      width: 100%;
      position: absolute;
      top: 36rpx;
      left: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left {
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 40rpx;
        }
      }

      .right {
        .scoreName {
          display: flex;
          align-items: center;
          .right-scoreName {
            margin-top:80rpx;
            text-align: center;
            margin-left: 20rpx;
            view:first-child {
              font-size: 34rpx;
            }

            view:last-child {
              font-size: 32rpx;
            }
          }
        }
      }
    }
  }
  .content {
    margin: 40rpx 20rpx;
    .count,
    .transfer-info {
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
      width: calc(100% - 30rpx);
      height: 100rpx;
      padding: 0 15rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .transfer-info {
      height: 150rpx;
      border-bottom: 1px solid #ccc8c8;
      input {
        width: 330rpx;
        text-align: right;
      }
      .sum {
        color: red;
        font-size: 35rpx;
        font-weight: 500;
      }
      .right{
          text-align: right;
         width: 400rpx;
      }
    }
    .other {
      margin-top: 40rpx;
    }
    .btn {
      margin-top: 80rpx;
      width: 310rpx;
      height: 100rpx;
      background: #5756b3;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      border-radius: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>